<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../dist/style/css/base.css">
    <script>
        var deviceWidth = document.documentElement.clientWidth;
        if (deviceWidth > 640) deviceWidth = 640;
        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
    </script>
</head>

<body>

    <div class="warp h">
        <!--header-->
        <header class="hd br">
            <a href="#123" class="l-icon only-icon">
            <i class="iconfont icon-left1"></i>      
        </a>
            <p class="tit2">
                添加新地址
            </p>

        </header>

        <ul class="msg-bar">
            <li>

                <span class="l">收货人</span>
                <input type="text" class="input_txt">


            </li>
            <li>

                <span class="l">联系电话</span>
                <input type="text" class="input_txt">


            </li>
            <li>
                <a id="city">
                    <span class="l">所在地区</span>
                    <span class="r">请选择 <i class=" iconfont icon-left"></i></span>
                    
                </a>
            </li>
            <li>
                <a id="street">
                    <span class="l">街道</span>
                    <span class="r">请选择 <i class=" iconfont icon-left"></i></span>
                    
                </a>
            </li>
            <li class="textarea-bar">
                <textarea placeholder="请填写详细地址，不少于5个字"></textarea>
            </li>

        </ul>




        <a href="#123" class="save-btn">
            保存收货信息
        </a>


        <div class="line-box"></div>

        <div class="pd-box"></div>




    </div>

    <script src="../dist/js/base.js"></script>
    <script src="../dist/js/lib/city.js"></script>
    <script src="../dist/js/lib/picker.min.js"></script>
    <script>
        // 矫正rem
        function correctrem() {
            var rem_full_width = $("<div id='rem-test' style='width:7.5rem'></div>").appendTo($('body')).width();
            var device_width = Math.min(document.documentElement.clientWidth, 640);
            if (rem_full_width !== device_width) {
                document.documentElement.style.fontSize = (device_width / 7.5) * (device_width / rem_full_width) + 'px';
            }
            $('#rem-test').remove();
        }
        correctrem();


        var nameEl = document.getElementById('city');

        var first = []; /* 省，直辖市 */
        var second = []; /* 市 */
        var third = []; /* 镇 */

        var selectedIndex = [0, 0, 0]; /* 默认选中的地区 */

        var checked = [0, 0, 0]; /* 已选选项 */

        function creatList(obj, list) {
            obj.forEach(function (item, index, arr) {
                var temp = new Object();
                temp.text = item.name;
                temp.value = index;
                list.push(temp);
            })
        }

        creatList(city, first);

        if (city[selectedIndex[0]].hasOwnProperty('sub')) {
            creatList(city[selectedIndex[0]].sub, second);
        } else {
            second = [{ text: '', value: 0 }];
        }

        if (city[selectedIndex[0]].sub[selectedIndex[1]].hasOwnProperty('sub')) {
            creatList(city[selectedIndex[0]].sub[selectedIndex[1]].sub, third);
        } else {
            third = [{ text: '', value: 0 }];
        }

        var picker = new Picker({
            data: [first, second, third],
            selectedIndex: selectedIndex,
            // title: '地址选择'
        });

        picker.on('picker.select', function (selectedVal, selectedIndex) {
            var text1 = first[selectedIndex[0]].text;
            var text2 = second[selectedIndex[1]].text;
            var text3 = third[selectedIndex[2]] ? third[selectedIndex[2]].text : '';

            nameEl.innerText = text1 + ' ' + text2 + ' ' + text3;
        });

        picker.on('picker.change', function (index, selectedIndex) {
            if (index === 0) {
                firstChange();
            } else if (index === 1) {
                secondChange();
            }

            function firstChange() {
                second = [];
                third = [];
                checked[0] = selectedIndex;
                var firstCity = city[selectedIndex];
                if (firstCity.hasOwnProperty('sub')) {
                    creatList(firstCity.sub, second);

                    var secondCity = city[selectedIndex].sub[0]
                    if (secondCity.hasOwnProperty('sub')) {
                        creatList(secondCity.sub, third);
                    } else {
                        third = [{ text: '', value: 0 }];
                        checked[2] = 0;
                    }
                } else {
                    second = [{ text: '', value: 0 }];
                    third = [{ text: '', value: 0 }];
                    checked[1] = 0;
                    checked[2] = 0;
                }

                picker.refillColumn(1, second);
                picker.refillColumn(2, third);
                picker.scrollColumn(1, 0)
                picker.scrollColumn(2, 0)
            }

            function secondChange() {
                third = [];
                checked[1] = selectedIndex;
                var first_index = checked[0];
                if (city[first_index].sub[selectedIndex].hasOwnProperty('sub')) {
                    var secondCity = city[first_index].sub[selectedIndex];
                    creatList(secondCity.sub, third);
                    picker.refillColumn(2, third);
                    picker.scrollColumn(2, 0)
                } else {
                    third = [{ text: '', value: 0 }];
                    checked[2] = 0;
                    picker.refillColumn(2, third);
                    picker.scrollColumn(2, 0)
                }
            }

        });

        picker.on('picker.valuechange', function (selectedVal, selectedIndex) {
            console.log(selectedVal);
            console.log(selectedIndex);
        });

        nameEl.addEventListener('click', function () {
            picker.show();
        });

        var picker2 = new Picker({
            data: [[
                {
                    text:"a",
                    value:1                    
                },{
                    text:"b",
                    value:1                    
                },{
                    text:"c",
                    value:1                    
                }]],
            selectedIndex: [1],
            // title: '地址选择'
        });
        $('#street').on('click', function () {
            picker2.show();
        })
         picker2.on('picker.select', function (selectedVal, selectedIndex) {
                // picker1El.innerText = data1[selectedIndex[0]].text;
            });

            picker2.on('picker.change', function (index, selectedIndex) {
                console.log(index);
            });

            picker2.on('picker.valuechange', function (selectedVal, selectedIndex) {
                console.log(selectedVal);
            });

    </script>

</body>

</html>